  <template>
    <div class="pusher-container" id="rtcpusher" :style="{left: config.x + 'px', top: config.y + 'px', width: config.width + 'px', height: config.height + 'px', position: 'absolute'}">
      <live-pusher
        :url="url"
        v-if="url !== ''"
        :style="{position: 'absolute', width: '100%', height: config.height + 'px'}"
        mode="live"
        :aspect="aspect"
        class="camera"
        @statechange="stateChangeHandler"
        @netstatus="netChangeHandler"
        background-mute="true"
        :enable-camera="enableCamera"
        :muted="muted"
        :beauty="beauty"
        enable-agc="true"
        enable-ans="true"
        audio-reverb-type="5"
        max-bitrate="500"
        min-bitrate="200"
        :debug="debug"
        :autopush="true">
          <slot />
        <!-- <cover-view
          v-if="status !== 'ready'"
          class="sud flex-center-column"
          style="display:flex;position: absolute; width: 100%; height: 100%;justify-content:center;align-items:center;">
          <cover-image style="width: 182rpx;height:240rpx" :src="'/static/images/'+ status + '.png'"></cover-image>
        </cover-view> -->
        <cover-view style="position: absolute;top:10px;left:10px;font-size: 28rpx; right: 10px;color:#ccc;" v-if="coverText.length != 0">
          {{coverText}}
        </cover-view>
      </live-pusher>
    </div>
  </template>
<script>
  const app = getApp()
	export default {
		data () {
			return {
        debug: false,
        minBitrate: 200,
        maxBitrate: 500,
        enableCamera: true,
        muted: false,
        beauty: 0,
        aspect: '3:4',
        coverText: '',
        status: 'loading' // 加载状态：loading、ready、error
			}
		},
    props: {
      config: {},
      url: '',
      enableCamera: Boolean,
      muted: Boolean
    },
		mounted () {
      this.start()
      this.detached = false
		},
    lifetimes: {
      /**
       * 在组件实例被从页面节点树移除时执行
       */
      detached: function () {
        // auto stop yunxin-pusher when detached
        // this.stop()
        this.detached = true
      },
      /**
       * 在组件布局完成后执行，此时可以获取节点信息
       */
      attached: function () {
        this.start()
        this.detached = false
      },
    },
		methods: {
		  /**
		   * 播放推流
		   * 一般情况下不应手动调用，在推流组件预备好后会自动被调用
		   */
		  start (options = {}) {
		    if (!this.livePusherContext) {
		      this.livePusherContext = mpvue.createLivePusherContext()
		    }
		    this.livePusherContext.start(options)
		  },
		  /**
		   * 停止推流
		   */
		  stop (options = {}) {
		    if (this.livePusherContext) {
		      this.livePusherContext.stop(options)
		    }
		  },
		  /**
		   * 切换前后摄像头
		   */
		  switchCamera () {
		    this.livePusherContext.switchCamera()
		  },
		  /**
		   * 快照
		   */
		  snapshot() {
		    this.livePusherContext.snapshot()
		  },

		  /**
		   * 推流状态变化事件回调
		   */
		  stateChangeHandler (e) {
		    console.warn(`yunxin-pusher code: ${e.mp.detail.code} - ${e.mp.detail.message}.推流状态变化事件回调`)
		    if (e.mp.detail.code === -1307) { // 网络断连，且经多次重连抢救无效，更多重试请自行重启推
		      this.status = "error"
		      this.livePusherContext.stop({
		        complete: () => {
		          this.livePusherContext.start()
		        }
		      })
		      this.triggerEvent('pushfailed')
		    } else if (e.mp.detail.code === 1008) { // 编码器启动
		      if (this.status === "loading") {
		        this.status = "ready"
		      }
		    }
		  },
		  /**
		   * 网络状态通知回调
		   */
		  netChangeHandler(e) {
		    // console.log(`network: ${JSON.stringify(e.detail)}`);
		  },
		  /**
		   * 开启调试
		   */
		  toggleDebug(isDebug) {
		    this.debug = isDebug
		  }
		}
	}
</script>
<style scoped lang='less'>
  .pusher-container{
    background: black;
    display: block;
    position: absolute;
  }

  .sud{
    background-color: #1B2A38;
    opacity:0.65;
  }
</style>
